<template>
  <div class="box">
    <div id="" style="margin-bottom: 20px;">
      <el-button :type="type=='数据库管理'?'primary':''" v-has @click="type='数据库管理'">数据库管理</el-button>
      <el-button :type="type=='数据表管理'?'primary':''" v-has @click="type='数据表管理'">数据表管理</el-button>
      <el-button :type="type=='数据表手动注册'?'primary':''" v-has @click="type='数据表手动注册'">数据表手动注册</el-button>
      <el-button :type="type=='数据表自动发现'?'primary':''" v-has @click="type='数据表自动发现',Visible=true">数据表自动发现</el-button>
      <el-button :type="type=='数据表DDL分析'?'primary':''" v-has @click="type='数据表DDL分析'">数据表DDL分析</el-button>
      <el-button :type="type=='数据表血缘图谱分析'?'primary':''" v-has @click="type='数据表血缘图谱分析'">数据表血缘图谱分析</el-button>

    </div>
    <!-- <div v-if="type=='事件监测引擎'" style="margin-bottom:20px;"><el-button type="primary">新增</el-button></div> -->
    <template v-if="type=='数据库管理'">
      <el-table ref="multipleTable" :data="tableData1" border tooltip-effect="dark" fit stripe highlight-current-row>
        <el-table-column type="selection"></el-table-column>
        <el-table-column v-for="item in tableHead1" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper1'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="primary" size="mini">添加</el-button>
              <el-button type="primary" size="mini">修改</el-button>
              <el-button type="primary" size="mini">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type=='数据表管理'">
      <el-table ref="multipleTable" :data="tableData2" border tooltip-effect="dark" fit stripe highlight-current-row>
        <el-table-column type="selection"></el-table-column>
        <el-table-column v-for="item in tableHead2" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper2'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="primary" size="mini">明细查询</el-button>
              <el-button type="primary" size="mini">明细统计</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type=='数据表手动注册'">
      <el-table ref="multipleTable" :data="tableData3" border tooltip-effect="dark" fit stripe highlight-current-row>
        <el-table-column type="selection"></el-table-column>
        <el-table-column v-for="item in tableHead3" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='status'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="danger" size="mini" v-if="scope.row[item.title]=='未处理'"
                @click="scope.row[item.title]='已处理'">处理</el-button>
              <el-button type="primary" size="mini" v-if="scope.row[item.title]!='未处理'">已处理</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type=='数据表自动发现'">
      <el-dialog title="数据表自动发现" :close-on-click-modal="false" :visible.sync="Visible" width="30%">
        <div id="img-box">
          <img src="../../../assets/login/jinggao.png" alt="" />
          <div>表中已有3行数据</div>
        </div>
      </el-dialog>
    </template>
    <template v-if="type=='数据表DDL分析'">
      <el-table ref="multipleTable" :data="tableData5" border tooltip-effect="dark" fit stripe highlight-current-row>
        <el-table-column type="selection"></el-table-column>
        <el-table-column v-for="item in tableHead5" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper5'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="primary" size="mini" v-if="scope.row[item.title]!='未处理'">分析</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type=='数据表血缘图谱分析'">
      <img src="../../../assets/login/haha.png.png" style="width: 100%;" alt="" />
    </template>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        Visible: false,
        ruleForm: {},
        formData: {},
        ruleForm1: {},
        formData1: {},
        ruleForm2: {},
        formData2: {},
        fileList: [],
        type: '数据导入',
        tableHead1: [{
            id: 1,
            label: "数据库名称",
            title: "name",
          },
          {
            id: 2,
            label: "大小",
            title: "size",
          },
          {
            id: 3,
            label: "编码方式",
            title: "codingScheme",
          },
          {
            id: 4,
            label: "默认排序",
            title: "sort",
          },
          {
            id: 5,
            label: "大小限制",
            title: "limit",
          }
        ],
        tableData1: [{
            name: "测试数据库",
            size: "1G",
            codingScheme: "utf-8",
            sort: '1',
            limit: "2G"
          },
          {
            name: "测试数据库1",
            size: "2G",
            codingScheme: "utf-8",
            sort: '1',
            limit: "4G"
          },
          {
            name: "测试数据库2",
            size: "1G",
            codingScheme: "utf-8",
            sort: '1',
            limit: "2G"
          }
        ],

        formData: {},

        tableHead2: [{
            id: 1,
            label: "字段名称",
            title: "fieldName",
          },
          {
            id: 2,
            label: "字段类型",
            title: "fieldType",
          },
          {
            id: 3,
            label: "字段说明",
            title: "instructions",
          },
          {
            id: 4,
            label: "是否主键",
            title: "isPKey",
          }
        ],
        tableData2: [{
            fieldName: "id",
            fieldType: 'int(11)',
            instructions: '主键ID',
            isPKey: '是'
          },
          {
            fieldName: "app_name",
            fieldType: 'varchar(50)',
            instructions: '应用名称',
            isPKey: '否'
          }
        ],
        tableHead3: [{
            id: 1,
            label: "名",
            title: "name",
          },
          {
            id: 2,
            label: "类型",
            title: "type",
          },
          {
            id: 3,
            label: "长度",
            title: "length",
          },
          {
            id: 4,
            label: "小数点",
            title: "double",
          }
        ],
        tableData3: [{
            name: "ID",
            type: 'int',
            length: '11',
            double: '0'
          },
          {
            name: "NAME",
            type: 'VARCHAR',
            length: '20',
            double: '0'
          },
          {
            name: "PWD",
            type: 'char',
            length: '20',
            double: '0'
          },
          {
            name: "IMG",
            type: 'VARCHAR',
            length: '100',
            double: '0'
          }
        ],

        tableHead5: [{
            id: 1,
            label: "表名",
            title: "name",
          },

          {
            id: 2,
            label: "操作",
            title: "oper5",
          }
        ],
        tableData5: [{
            name: "pr_student"
          },
          {
            name: "pr_data_classify"
          },
          {
            name: "pr_asset"
          }
        ]

      };
    },
    computed: {
      uploadFile() {
        return process.env.VUE_APP_BASE_API + "/dc/importCustomer";
      },
      headers() {
        const head = {
          token: this.$store.getters.token,
        };
        return head;
      },
    },
    methods: {
      submitForm() {
        this.$message({
          type: "success",
          message: '上传目录成功'
        })
      },
      resetForm() {

      }
    }
  }
</script>

<style lang="scss" scoped>
  .box {
    padding: 30px;
    width: 100%;
  }

  #img-box {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 800;

    img {
      width: 50px;
      vertical-align: middle;
    }
  }
</style>
